<template>
    <view style="width: 750upx;background-color: #f7f6fc;">
        <view  v-for="(item,index) in plan">
           <view class="content"  v-if="item.signJude == 0" @tap="enter(item.id)">
                    <view class="title">
           
                        <view class="left">
           
                            <view class="titlename">
                                <view class="label">
                                    <image src="../../static/schedule/labeltwo.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                                </view>
                                <view class="name">
                                    <text>{{item.subtitle}}</text>
                                </view>
           
                            </view>
                        </view>
                        <view class="middle">
                            <view class="progress-sign">
                                进度{{item.signednum}}/{{item.signnum}}
                            </view>
                            <view class="holiday">
                                剩余假期{{item.vacation}}天
                            </view>
                        </view>
           
                    </view>
           
                    <view class="progress">
                        <view class="cu-progress round sm">
                            <view class="bg" :style="{width:item.progress}"></view>
                        </view>
                    </view>
           
                    
                    <view class="tail">
                        <view class="watch">邀请围观</view>
                        <view class="support">赞{{item.thumb}}</view>
                        <view class="integral">
                            <view class="again" style="padding-left: 50upx;"><button type="primary" size="mini" plain="true" style="width: 150upx;font-weight: 600;border-radius: 25upx;font-size: 30upx;height: 65upx;padding-left: 20upx;padding-right:20upx;">已签到</button></view>
                        </view>                
                    </view>
           </view>

             <view class="content"  v-if="item.signJude == 1" @tap="enter(item.id)">
                <view class="title">

                    <view class="left">

                        <view class="titlename">
                            <view class="label">
                                <image src="../../static/schedule/labelone.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                            </view>
                            <view class="name">
                                <text>{{item.subtitle}}</text>
                            </view>

                        </view>
                    </view>
                    <view class="middle">
                        <view class="progress-sign">
                            进度{{item.signednum}}/{{item.signnum}}
                        </view>
                        <view class="holiday">
                            剩余假期{{item.vacation}}天
                        </view>
                    </view>

                </view>

                <view class="progress">
                    <view class="cu-progress round sm">
                        <view class="bg" :style="{width:item.progress}"></view>
                    </view>
                </view>
                
                <view class="tail">
                    <view class="watch">邀请围观</view>
                    <view class="support">赞{{item.thumb}}</view>
                    <view class="integral">
                        <view class="again" style="padding-left: 50upx;"><button  size="mini"  style="width: 150upx;background-color: #00a3e8;color: white;font-weight: 800;border-radius: 25upx;" @click.stop="qiandao(index)">签到</button></view>
                    </view>                
                </view>
       </view>
        
        
        <view class="content"  v-if="item.signJude == 2" @tap="enter(item.id)">
                 <view class="title">
        
                     <view class="left">
        
                         <view class="titlename">
                             <view class="label">
                                 <image src="../../static/schedule/labelone.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                             </view>
                             <view class="name">
                                 <text>{{item.subtitle}}</text>
                             </view>
        
                         </view>
                     </view>
                     <view class="middle">
                         <view class="progress-sign">
                             进度{{item.signednum}}/{{item.signnum}}
                         </view>
                         <view class="holiday">
                             剩余假期{{item.vacation}}天
                         </view>
                     </view>
        
                 </view>
        
                 <view class="progress">
                     <view class="cu-progress round sm">
                         <view class="bg" :style="{width:item.progress}"></view>
                     </view>
                 </view>
                 
                 <view class="tail">
                     <view class="watch">邀请围观</view>
                     <view class="support">赞{{item.thumb}}</view>
                     <view class="integral">
                         <view class="again" style="padding-left: 50upx;"><button type="primary" size="mini" plain="true" style="width: 150upx;font-weight: 600;border-radius: 25upx;font-size: 30upx;height: 65upx;padding-left: 20upx;padding-right:20upx;">明天开始</button></view>
                     </view>                
                 </view>
        </view>
        
        
        </view> 
        
                 
            
        
        <view style="height: 200upx;width: 750upx;"></view>
   

        <view class="dingwei">
            <button size="default"  @tap="goto"  hover-class="button-hover" class="button">定个目标，开始签到</button>
        </view>
        
     </view>  
</template>

<script>
	export default {
        props:{
          ongoing:Number  
        },
        watch:{
            
            //监听上拉加载
            ongoing:function(newQuestion, oldQuestion){
               
                 console.log(this.ongoing);
                
                this.$emit('reachgoing') 
                    
                if(this.ongoing == 0){
                    return 
                }
                
                if(this.sign == 0){
                    return
                }
                    
                if(newQuestion == 1){
                    this.getdata(this,this.PageNum)
                }
                
                 
            }
        },
		data() {
			return {
				PageNum:2,
                plan:[],
                planNum:0,
                sign:1
			}
		},
		methods: {
            
            //获取正在进行的计划数据
			getdata(c,PageNum = 1){
                
                
                this.$api.test({
                   url:"setgoals/getMygoals",
                   data:{
                       type:0,
                       PageNum:PageNum,
                       PageLimit:5
                   }
                }).then((res) =>{
                   
                  
                 if(res.data.plan.length == 0){
                     c.sign = 0;
                     uni.setStorageSync("goingnum",c.sign)
                     return; 
                 }
                 
                 for(let i of res.data.plan){
                     
                     let {signednum,signnum} = i
                     
                     signnum = parseFloat(signnum); 
                  signednum = parseFloat(signednum); 
                     
                     i.progress = Math.round(signednum / signnum * 10000) / 100.00 + "%";
                     
                 }
                      
                 c.planNum = res.data.planNum;
                 
                   c.plan =  c.plan.concat(res.data.plan);
                   
                   uni.setStorage({
                       key:"goingdata",
                       data:c.plan,
                       success(){
                           
                       }
                   })
                    
                })
                 
           
                
                this.PageNum++;
                
            },
            goto(){
               uni.navigateTo({
   url:"../../pages/setgoal/setgoal",
    animationType: 'pop-in',
    animationDuration: 200
});
            },
            // 进行签到操作
            qiandao(index){
           
              var c = this.plan[index].id;    
              
              
                uni.setStorage({
                    key:"qiandaoids",
                    data:c ,
                    success() {
                        console.log("id已存");
                    }
                })
                
                uni.navigateTo({
                    url:"../../pages/checkin/checkin"
                })
            },
            
            //跳转到计划的详细页面
            enter(id){
                
                 uni.setStorageSync("id",id)
                 
                uni.navigateTo({
                    url:"../../pages/detail/detail"
                })
               
                
                
            }
                 
		},
        // 进来时进行初始化数据赋值
     created() {
            this.sign = 1;
            let c = this;   
           
      // let value =  uni.getStorageSync('goingnum');
      
     
            
            // if( value === 0){
            //     c.sign = 0;
                
            
           // uni.getStorage({
            //    key:"goingdata",
             //   success(res){
            //       c.plan = res.data
           //     }
          //  })
        //     return
            // }
            // c.getdata(c);
           uni.getStorage({
              key:"ongoingfirst",
              success(res) {
                   c.plan  = res.data.plan;
              }
          })
        },
        
        // 进行页面的数据刷新操作
        mounted(){
            var c = this;
            
              uni.$on('updatelo',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
        
        // 已签到刷新数据
                    uni.getStorage({
                key:"hasqiandao",
                success(res){
                    
                    if(res.data == 1){
                      
              
                        
                     c.$api.test({
                         url:"setgoals/getMygoals?type=0&PageNum=1&PageLimit=5"
                     
                     }).then((res) =>{
                        
                       
                      for(let i of res.data.plan){
                          
                          let {signednum,signnum} = i
                          
                          signnum = parseFloat(signnum); 
                       signednum = parseFloat(signednum); 
                          
                          i.progress = Math.round(signednum / signnum * 10000) / 100.00 + "%";
                          
                      }
                      
                       c.plan = res.data.plan;
                     })   
                        
                        
                        
                        
                        
                        c.PageNum = 2;
                      c.sign = 1;
                        
                            uni.removeStorage({
                key:"hasqiandao"
            })        
                    }
                }
            })
            
         
        
        // 定完新计划回来刷新数据
           uni.getStorage({
            key:"hassetgoal",
            success(res){
                
                console.log("刷新")
                if(res.data == 1){
                    
                    c.$api.test({
                      url:"setgoals/getMygoals?type=0&PageNum=1&PageLimit=5"
                     
                    }).then((res) =>{
                       
                      
                      
                       for(let i of res.data.plan){
                          
                          let {signednum,signnum} = i
                          
                          signnum = parseFloat(signnum); 
                       signednum = parseFloat(signednum); 
                          
                          i.progress = Math.round(signednum / signnum * 10000) / 100.00 + "%";
                          
                      }
                                             
                       c.plan = res.data.plan;
                        
                    })
     
                   
                    
                   c.PageNum = 2;
                   c.sign = 1;
                    
                     uni.removeStorage({
            key:"hassetgoal"
        })
                             
                }
            }
        })
        
        //过去的计划制定再来一次进来刷新数据
        uni.getStorage({
           key:"again",
           success(res){
               
               console.log("刷新")
               
               
               if(res.data === "ok"){
                   
                   c.$api.test({
                       url:"setgoals/getMygoals?type=0&PageNum=1&PageLimit=5",
                     
                   }).then((res) =>{
                    for(let i of res.data.plan){
                        
                        let {signednum,signnum} = i
                        
                        signnum = parseFloat(signnum); 
                     signednum = parseFloat(signednum); 
                        
                        i.progress = Math.round(signednum / signnum * 10000) / 100.00 + "%";
                        
                    }
                                          
                     c.plan = res.data.plan;
                       
                   })
                   
           
                 
                   
                 c.PageNum = 2;
                 c.sign = 1;
                   
                    uni.removeStorage({
           key:"again"
       })
                            
               }
           }
       })
    })
            
            
            
            

        }  
	}
</script>

<style>
   .holiday{
        color: #999999;
    }
    .title{
        display: flex;
        flex-direction: column;
    }
.content{
    padding-left:30upx ;
    padding-right: 30upx;
    margin-left: 40upx;
    margin-right: 40upx;
    padding-top: 20upx;
    padding-bottom: 10upx;
    background-color: #FBFBFB ;
    margin-top: 20upx;
   /* border: 0.05upx solid #C0C0C0; */
}
.content:active{
    
    background-color: #eaf0f9;
}
.progress-sign{
    color: #999999;
    font-size: 30upx;
}
.left{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.sign{
    width:130upx;
    height: 100upx;
}
.titlename{
    display: flex;
   flex-direction: row;
}
.progress{
    padding-bottom: 20upx;
    border-bottom: 1px solid #D8D8D8;  
}
.tail{
    display: flex;
    flex-direction: row;
    padding-top: 30upx;
    align-items: center;
}
.name{
    color: #333333;
    font-size: 35upx;
    font-weight: 800;
}
.label{
    width: 50upx;
    height: 50upx;
    margin-right: 30upx;
}
.watch{
    width:340upx;
    color: #333333;
}
.support{
     width:250upx;
    color: #333333;
    padding-left: 30upx;
}
.integral{
   width: 250upx;
   border-radius: 20upx;
}
.jifen{
    padding-left: 50upx;
    color: #333333;
}
.middle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
.again{
    width: 200upx;
}
.dingwei{
       position: fixed;
            z-index:2008;
            bottom: 0upx;
            padding-bottom: 20upx;
            padding-left: 40upx;
            padding-right: 40upx;
            width:750upx;  
     background-color: #f7f6fc;
     opacity: 1;

}
.button{
  background-color: #fe9f1a;
  border-radius: 50upx;
  height: 85upx;
  padding-bottom: 30upx;
  font-size: 35upx;
  font-weight: 800;
  color: white;
}
.button-hover{
    background-color: #FF9700;
}
.bg{
    background-color: #00a3e8;
}
</style>
